<template>
  <div class="index">
    <ol>
      <li><span>在院病人数</span> <br>{{ formData.num1 }}</li>
      <li><span>已筛查病人数</span> <br>{{formData.num2}}</li>
      <li><span>营养风险人数</span> <br>{{formData.num3}}</li>
      <li><span>申请会诊人数</span> <br>{{formData.num4}}</li>
      <li><span>肠内治疗患者</span> <br>{{formData.num5}}</li>
      <li><span>肠外治疗患者</span> <br>{{formData.num6}}</li>
    </ol>
    <div class="clearfix">
      <div id="myChart1" :style="{width: '600px', height: '600px'}" ref="myEchart1"></div>
      <div id="myChart2" :style="{width: '600px', height: '600px'}" ref="myEchart2"></div>
    </div>
    <div class="fxtip">
      <h2>营养风险提醒</h2>
      <!-- 列表显示 -->
      <el-table :data="tableData" :border="true" style="width: '1000px';margin-top: 10px;">
        <el-table-column prop="id" label="住院号" width="200px"></el-table-column>
        <el-table-column prop="date" label="姓名" width="200px"></el-table-column>
        <el-table-column prop="id" label="病区" width="200px"></el-table-column>
        <el-table-column prop="name" label="筛查方法" width="200px"></el-table-column>
        <el-table-column prop="name" label="筛查结果" width="200px"></el-table-column>

      </el-table>

    </div>

  </div>

</template>
<script>
  import echarts from 'echarts'

  export default {
    data() {
      return {
        formData: {
          "num1": "134234",
          "num2": "134234",
          "num3": "134234",
          "num4": "134234",
          "num5": "134234",
          "num6": "134234",
        },
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    mounted() {
      this.drawLine()
    },
    methods: {
      drawLine() {
//        基于准备好的dom，初始化
        let myChart1 = echarts.init(document.getElementById('myChart1'));
        let myChart2 = echarts.init(document.getElementById('myChart2'));
//        绘制饼图

        myChart1.setOption({
//          title: { text: '嵌套环形图' },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'horizontal',
            y: 'bottom',
            data: ['NRS2002', 'SGA', 'BCA', 'MNA', 'MUST', '肠内营养', '肠外营养', '治疗膳食', '营养宣教']

          },
          series: [
            {
              name: '次数',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '30%'],

              label: {
                normal: {
                  position: 'inner'
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                {value: 335, name: '营养筛查'},
                {value: 679, name: '肠内营养'},
                {value: 1548, name: '肠外营养'},
                {value: 335, name: '治疗膳食'},
                {value: 679, name: '营养宣教'}
              ]
            },
            {
              name: '次数',
              type: 'pie',
              radius: ['40%', '55%'],
              label: {
                normal: {
                  formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                  backgroundColor: '#eee',
                  borderColor: '#aaa',
                  borderWidth: 1,
                  borderRadius: 4,
                  // shadowBlur:3,
                  // shadowOffsetX: 2,
                  // shadowOffsetY: 2,
                  // shadowColor: '#999',
                  // padding: [0, 7],
                  rich: {
                    a: {
                      color: '#999',
                      lineHeight: 20,
                      align: 'center'
                    },
                    // abg: {
                    //     backgroundColor: '#333',
                    //     width: '100%',
                    //     align: 'right',
                    //     height: 22,
                    //     borderRadius: [4, 4, 0, 0]
                    // },
                    hr: {
                      borderColor: '#aaa',
                      width: '100%',
                      borderWidth: 0.5,
                      height: 0
                    },
                    b: {
                      fontSize: 14,
                      lineHeight: 33
                    },
                    per: {
                      color: '#eee',
                      backgroundColor: '#334455',
                      padding: [2, 4],
                      borderRadius: 2
                    }
                  }
                }
              },
              data: [
                {value: 335, name: 'NRS2002'},
                {value: 310, name: 'SGA'},
                {value: 234, name: 'BCA'},
                {value: 135, name: 'MNA'},
                {value: 1048, name: 'MUST'},
                {value: 251, name: '肠内营养'},
                {value: 147, name: '肠外营养'},
                {value: 102, name: '治疗膳食'},
                {value: 102, name: '营养宣教'}
//                {
//                  label: {
//                      fontSize:12
//                  }
//                }

              ]
            }
          ]
        });


        let cellSize = [80, 80];
        let pieRadius = 30;
        function getVirtulData() {
          let date = +echarts.number.parseDate('2017-02-01');
          let end = +echarts.number.parseDate('2017-03-01');
          let dayTime = 3600 * 24 * 1000;
          let data = [];
          for (let time = date; time < end; time += dayTime) {
            data.push([
              echarts.format.formatTime('yyyy-MM-dd', time),
              Math.floor(Math.random() * 10000)
            ]);
          }
          return data;
        }

        function getPieSeries(scatterData, chart) {
          return echarts.util.map(scatterData, function (item, index) {
            let center = chart.convertToPixel('calendar', item);
            return {
              id: index + 'pie',
              type: 'pie',
              center: center,
              label: {
                normal: {
                  formatter: '{c}',
                  position: 'inside'
                }
              },
              radius: pieRadius,
              data: [
                {name: '宣教', value: Math.round(Math.random() * 24)},
                {name: 'NRS2002', value: Math.round(Math.random() * 24)},
                {name: 'SGA', value: Math.round(Math.random() * 24)},
                {name: 'BCA', value: Math.round(Math.random() * 24)},
                {name: 'MNA', value: Math.round(Math.random() * 24)},
                {name: '肠内营养', value: Math.round(Math.random() * 24)},
                {name: '肠外营养', value: Math.round(Math.random() * 24)},
                {name: '治疗膳食', value: Math.round(Math.random() * 24)}
              ]
            };
          });
        }

        function getPieSeriesUpdate(scatterData, chart) {
          return echarts.util.map(scatterData, function (item, index) {
            var center = chart.convertToPixel('calendar', item);
            return {
              id: index + 'pie',
              center: center
            };
          });
        }

        var scatterData = getVirtulData();

        myChart2.setOption({
            tooltip: {},
            legend: {
              data: ['宣教', 'NRS2002', 'SGA', 'BCA', 'MNA', 'MUST', '肠内营养', '肠外营养', '治疗膳食'],
              bottom: 0
            },
            calendar: {
              top: 'middle',
              left: 'center',
              orient: 'vertical',
              cellSize: cellSize,
              yearLabel: {
                show: false,
                textStyle: {
                  fontSize: 30
                }
              },
              dayLabel: {
                margin: 20,
                firstDay: 1,
                nameMap: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
              },
              monthLabel: {
                show: false
              },
              range: ['2017-02']
            },
            series: [{
              id: 'label',
              type: 'scatter',
              coordinateSystem: 'calendar',
              symbolSize: 1,
              label: {
                normal: {
                  show: true,
                  formatter: function (params) {
                    return echarts.format.formatTime('dd', params.value[0]);
                  },
                  offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
                  textStyle: {
                    color: '#000',
                    fontSize: 14
                  }
                }
              },
              data: scatterData
            }]
          }
        );
        if (!app.inNode) {
          var pieInitialized;
          setTimeout(function () {
            pieInitialized = true;
            myChart2.setOption({
              series: getPieSeries(scatterData, myChart2)
            });
          }, 10);

          app.onresize = function () {
            if (pieInitialized) {
              myChart2.setOption({
                series: getPieSeriesUpdate(scatterData, myChart2)
              });
            }
          };
        }

      }

    }

  }

</script>
<style scoped scss>
  .index h2{
    padding: 5px;
    background-color: #324057;
    color: #fff;
    font-weight: normal;
    font-size: 20px;
  }
  #myChart1{
    float: left;
  }
  #myChart2{
    float: right;
  }
  .index ol {
    overflow: hidden
  }

  .index ol li span {
    color: #868686;
  }

  .index ol li {
    float: left;
    list-style: none;
    padding: 5px;
    margin-right: 10px;
    border-radius: 10px;
    background-color: #4DDBB8;
    font-size: 30px;
    color: #FF9933;
  }
</style>
